<template>
    <div class="energy-metrics-chart">
        <div ref="chartContainer" class="chart-container"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'EnergyMetricsChart',
    data() {
        return {
            chart: null,
            // X轴分类
            categories: [
                '00:00',
                '04:00',
                '08:00',
                '12:00',
                '16:00'
            ],
            // 引导值数据
            guideValues: [28, 30, 48, 63, 55],
            // 基准值数据
            baselineValues: [17, 17, 16, 17, 17],
            // 约束值数据
            constraintValues: [21, 63, 21, 21, 21],
            // 人均耗能数据 (对应右Y轴，只有第一个分类使用)
            perCapitaValues: [1800, 2000, 3500, 5000, 4200]
        }
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                this.initChart()
            }, 500)
        })
        window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose()
        }
        window.removeEventListener('resize', this.handleResize)
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chartContainer)
            const option = {
                grid: {
                    left: '20px',
                    right: '20px',
                    top: '60px',
                    bottom: '36px',
                    containLabel: true
                },
                legend: {
                    data: ['一次能源标准煤炭', '二次能源标准煤炭', '二氧化碳排放'],
                    right: 0,
                    itemWidth: 14,
                    itemHeight: 14,
                    textStyle: {
                        fontSize: 14,
                        color: '#666'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: this.categories,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#666',
                        fontSize: 12,
                        interval: 0,
                        lineHeight: 16,
                        margin: 15
                    },
                    splitLine: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '标准煤炭单位：吨',
                        nameTextStyle: {
                            color: '#666',
                            fontSize: 12,
                            lineHeight: 14,
                            padding: [0, 0, 0, 24]
                        },
                        min: 0,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#666',
                            fontSize: 12
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#e6e6e6',
                                width: 1,
                                type: 'solid'
                            }
                        }
                    },
                    {
                        type: 'value',
                        name: '碳排放单位：tCO2e',
                        offset: -20,
                        nameTextStyle: {
                            color: '#666',
                            fontSize: 12,
                            lineHeight: 14,
                            padding: [0, 0, 0, 0]
                        },
                        min: 0,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#666',
                            fontSize: 12,
                            show: true,
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '一次能源标准煤炭',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: this.guideValues,
                        barWidth: 16,
                        itemStyle: {
                            color: '#F9744F',
                            borderRadius: [2, 2, 0, 0]
                        }
                    },
                    {
                        name: '二次能源标准煤炭',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: this.baselineValues,
                        barWidth: 16,
                        itemStyle: {
                            color: '#FFAD1E',
                            borderRadius: [2, 2, 0, 0]
                        }
                    },
                    {
                        name: '二氧化碳排放',
                        type: 'bar',
                        yAxisIndex: 1,
                        data: this.constraintValues,
                        barWidth: 16,
                        itemStyle: {
                            color: '#91DF5D',
                            borderRadius: [2, 2, 0, 0]
                        }
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderColor: 'transparent',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    },
                    formatter: (params) => {
                        let result = `${params[0].axisValue.replace('\n', '')}<br/>`
                        params.forEach(param => {
                            const unit = param.axisValue === '人均\n综合耗能' ? 'kgce/(p·a)' : 'kgce/(㎡·a)'
                            result += `${param.seriesName}: ${param.value} ${unit}<br/>`
                        })
                        return result
                    }
                }
            }

            this.chart.setOption(option)
        },
        handleResize() {
            if (this.chart) {
                this.chart.resize()
            }
        },
        // 更新数据方法
        updateData(guideValues, baselineValues, constraintValues) {
            if (guideValues) this.guideValues = guideValues
            if (baselineValues) this.baselineValues = baselineValues
            if (constraintValues) this.constraintValues = constraintValues

            if (this.chart) {
                this.chart.setOption({
                    series: [
                        {data: this.guideValues},
                        {data: this.baselineValues},
                        {data: this.constraintValues}
                    ]
                })
            }
        }
    }
}
</script>

<style scoped>
.energy-metrics-chart {
    width: 100%;
    background: #fff;
}

.chart-container {
    width: 100%;
    height: 332px;
}
</style>
